Buefy — Collapse Component

Buefy is a UI framework that’s based on Bulma.

In this article, we’ll look at how to use Buefy in our Vue app.

Collapse

The collapse component is a component that lets us toggle items on and off.

To add it, we add the b-collapse component by writing:

<template>
  <section>
    <b-collapse :open="false">
      <button class="button is-primary" slot="trigger">Click me!</button>
      <div class="notification">
        <div class="content">
          <h3>Subtitle</h3>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus.
          </p>
        </div>
      </div>
    </b-collapse>
  </section>
</template>

<script>
export default {
  data() {
    return {};
  }
};
</script>

We add the b-collapse component with the button being in the trigger slot to use as the trigger for the collapse component.

Then content is anything outside the trigger slot in the b-collapse component.

Collapse Panel

We can add a tab panel by adding an element with the panel-tabs class:

<template>
  <section>
    <div class="block">
      <button class="button is-medium is-primary" [@click](http://twitter.com/click "Twitter profile for @click")="isOpen = !isOpen">Toggle</button>
    </div>

    <b-collapse class="panel" animation="slide" v-model="isOpen">
      <div slot="trigger" class="panel-heading" role="button" aria-controls="contentIdForA11y2">
        <strong>Title</strong>
      </div>
      <p class="panel-tabs">
        <a class="is-active">All</a>
        <a>Public</a>
        <a>Private</a>
      </p>
      <div class="panel-block">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        <br>Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus.
      </div>
    </b-collapse>
  </section>
</template>

<script>
export default {
  data() {
    return {
      isOpen: true
    };
  }
};
</script>

We have the b-collapse component with the p element with the panel-tabs class.

And we have the panel-block class on the div to display as the panel content.

Collapse Card

We can make a collapsible card by setting the class attribute of it to card .

The animation has the effect for the toggle.

For example, we can write:

<template>
  <section>
    <b-collapse class="card" animation="slide">
      <div slot="trigger" slot-scope="props" class="card-header" role="button">
        <p class="card-header-title">Component</p>
        <a class="card-header-icon">{{props.open ? '&#x2193;' : '&#x2191;'}}</a>
      </div>
      <div class="card-content">
        <div
          class="content"
        >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.</div>
      </div>
      <footer class="card-footer">
        <a class="card-footer-item">OK</a>
        <a class="card-footer-item">Cancel</a>
      </footer>
    </b-collapse>
  </section>
</template>

<script>
export default {
  data() {
    return {};
  }
};
</script>

We have the elements with th card-header-title with the title.

card-header-icon has the icon.

And the card-content class is applied to the div with the content.

card-footer has the footer class, and card-footer-item is for the footer items.

props.open indicates whether the collapse component is expanded or not.

Collapse Position

We can place the b-collapse component anywhere we like.

For instance, we can place it inside another element by writing:

<template>
  <section>
    <div class="content">
      <h3>Subtitle</h3>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Ut vulputate semper dui.
      </p>
    </div>
    <b-collapse :open="false" position="is-bottom">
      <a slot="trigger" slot-scope="props">
        {{ !props.open ? 'All options' : 'Fewer options' }}
        {{props.open ? '&#x2191;': '&#x2193;' }}
      </a>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus.
      </p>
    </b-collapse>
  </section>
</template>

We add the b-collapse component inside the div instead of keeping it standalone.

Conclusion

We can add a collapse component with Buefy to add a toggleable container to our Vue app.